import React ,{useEffect, useState}from 'react'
import { Container} from './style'
import classnames from 'classnames'
import { PageHeader,Tabs,Collapse  } from 'antd';
import { useNavigate} from 'react-router-dom';
import { CSSTransition } from 'react-transition-group'
import CommentA  from './Comments';

 export default function Homedetail() {
    const [mode, setMode] = useState('top');
    const [show, setShow] = useState(false);
    const [visited1, setVisited1] = useState(false)
    const [visited2, setVisited2] = useState(false)
    const { TabPane } = Tabs;
    const { Panel } = Collapse;
    const navigate = useNavigate()

    const onChange = (key) => {
        console.log(key);
      };
    
    const des = <p style={{"color":"#fff"}}>展开</p>
    const url = [
        'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5266954e45b2477d9d4ff75e1d5fe583~tplv-k3u1fbpfcp-watermark.image?',
        'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e6c47f8078c445a28b702495ec7bf494~tplv-k3u1fbpfcp-watermark.image?',
        'https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d4bc32050bd4280aa8a1b9d93bfb513~tplv-k3u1fbpfcp-watermark.image?',
        'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c72eeebb46ce4c9a9ccbe4158426a2e9~tplv-k3u1fbpfcp-watermark.image?'
    ]
    const text =`
      连环命案、私刑执法、预告杀人、以暴制暴...
      一群号称“神探”的团伙掀起了一场香港有史以来最邪恶的犯罪！
      患有精神疾病的“癫佬神探”李俊（刘青云 饰）为查真凶独闯犯罪现场！
      以“神探夫妇”陈仪（蔡卓妍 饰）和方礼信（林峯 饰）为首的重案组也开启了与杀戮赛跑的缉凶之路！敌友之间，
      正邪边缘，死亡审判的真相究竟是什么？真正的“神探”到底是谁？
    `
    const clickdown1 = (e) =>{
        e.preventDefault();
        e.stopPropagation();
        setVisited1(!visited1);
    }
    const clickdown2 = (e) =>{
        e.preventDefault();
        e.stopPropagation();
        setVisited2(!visited2)
    }
    useEffect(()=> {
        setShow(true)
        window.scrollTo(0,0)
    },[])
  return (
    <CSSTransition
        in={show}
        timeout={300}
        appear={true}
        classNames="fly"
        unmountOnExit
        onExit={() => {
            navigate(-1)
        }}
        >
        <Container >
            <PageHeader
            className="site-page-header"
            onBack={() => setShow(false)}
            subTitle="详情"
                />
            <div className="movie-page">
                <div className="movie-info">
                    <span className='title'>猫眼电影&nbsp;&gt;&nbsp;神探大战</span>
                    <div className="movie-info-top">
                        <div className="cover">
                            <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f483e391c3a64f3f80c199be32ac9191~tplv-k3u1fbpfcp-watermark.image?"/>
                        </div>
                        <div className="movie-desc">
                            <div className="movie-desc-top">
                                神探大战
                                <p>Detective VS. Sleuths</p>
                                <p>犯罪/动作/悬疑</p>
                                <p>刘青云、蔡卓妍</p>
                                <p>2022-07-08 18:00中国大陆上映 / 101分钟</p>
                                <div className="btns">
                                    <img  className = {classnames({actived:visited1})}
                                        onClick = {(e)=>clickdown1(e)}
                                        src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0f43a95b07f541379232e701a0d7e158~tplv-k3u1fbpfcp-watermark.image?"/>
                                    <img className = {classnames({actived:visited2})}
                                        onClick = {(e)=>clickdown2(e)}
                                    src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/df6dd76445504142a191f5dc39b7fe75~tplv-k3u1fbpfcp-watermark.image?"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="watch">
                    <img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4161d45373914cfd9d2bcd3e4ba4f5b0~tplv-k3u1fbpfcp-watermark.image?"/>
                    </div>
                    <div className="brief">  
                        <Collapse defaultActiveKey={['1']} onChange={onChange} 
                            bordered={false}
                            className="site-collapse-custom-collapse">
                            <p style={{"fontSize":".8rem","backgroundColor":"#296666"}}>简介
                            </p>
                            <Panel header={des} key="1"
                            className="site-collapse-custom-panel">
                                <p>{text}</p>
                            </Panel>
                        </Collapse>
                        <div className="author">
                            <span>职演人员</span>
                            <span style={{"marginLeft":"12.4rem"}} onClick={() => navigate("/homedetail/actors")}> 全部 &gt;</span>
                            <div className='role'>
                                <div>
                                    <img src="https://p1.meituan.net/moviemachine/daecff3d2cd57190c93a3d51ad9aabb9130848.jpg@160w_224h_80q_1e_1c"/>
                                    <p>韦家辉</p>
                                    <p>导演</p>
                                </div>
                                <div>
                                    <img src="https://p0.meituan.net/movie/2d86d07b09fb8f6c67e3a6f9e391ff2243176.jpg@160w_224h_80q_1e_1c"/>
                                    <p>刘青云</p>
                                    <p>饰：李俊</p>
                                </div>
                                <div>
                                <img src="https://p0.meituan.net/movie/e27e6216b7cbdf1d4bce60b2d339413d40754.jpg@160w_224h_80q_1e_1c"/>
                                <p>蔡卓妍</p>
                                <p>饰：陈奕</p>
                                </div>
                                <div>
                                <img src="https://p1.meituan.net/movie/d54416f946b06e80a7c2120c48d4b43966966.jpg@160w_224h_80q_1e_1c"/>
                                <p>林</p>
                                <p>饰：李信</p>
                                </div>
                            </div>
                            <span>视频推荐</span><span style={{"marginLeft":"12.4rem"}}> 全部 &gt;</span>
                            <div>
                                <Tabs
                                defaultActiveKey="0"
                                tabPosition={mode}
                                style={{
                                height: 140,
                                }}
                                >
                                {[
                                ...Array.from(
                                    {
                                    length: 4,
                                    },
                                    (_, i) => i,
                                ),
                                ].map((i) => (
                                <TabPane 
                                    tab={<img src={url[i]} style={{"width":"9rem"}}/>} key={i}>
                                </TabPane>
                                ))}
                                </Tabs>
                            </div> 
                            </div>
                            <div>
                        </div>
                    </div>
                </div>
            </div>

        <CommentA/>
        </Container>
    </CSSTransition>
  )
}
